<template>
    <span v-if="inited" style="transition: opacity .15s;" :style="{
        opacity: opacity ? 1 : 0
    }">{{ props.data }}</span>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import tool from '../tool'

const props = defineProps({
    data: {
        type: String,
        default: ''
    },
    anm: {
        type: Boolean,
        default: false
    }
})

const opacity = ref(false)

const inited = ref(false)

onMounted(async () => {
    if (props.anm) {
        opacity.value = false
    }else{
        opacity.value = true
    }
    inited.value = true
    if(props.anm){
        await tool.wait(0.01)
        opacity.value = true
    }
})
</script>

<style scoped></style>